<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Geometry Gallery</title>
    <meta name="description" content="Geometry Gallery - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #112" stats>
      <a-assets>
        <!-- Geometry mixins. -->
        <a-mixin id="box"
                 geometry="primitive: box; depth: .125; height: .125;
                           width: .125"></a-mixin>
        <a-mixin id="circle"
                 geometry="primitive: circle; radius: .2;
                           segments: 100; thetaStart: 0; thetaLength: 360">
        </a-mixin>
        <a-mixin id="cylinder"
                 geometry="primitive: cylinder; radius: 0.2; height: .5;
                           segmentsRadial: 50; segmentsHeight: 50:
                           openEnded: true; thetaStart: 0; thetaLength: 360">
        </a-mixin>
        <a-mixin id="ring"
                  geometry="primitive: ring; radiusInner: .3; radiusOuter: .5;
                            segmentsTheta: 50"></a-mixin>
        <a-mixin id="sphere"
                  geometry="primitive: sphere; radius: .1"></a-mixin>
        <a-mixin id="torus"
                  geometry="primitive: torus; arc: 720; radius: .3; radiusTubular: .05;
                            segmentsTubular: 10;"></a-mixin>
        <a-mixin id="torus-knot"
                  geometry="primitive: torusKnot; p: 3; q: 7; radius: .25;
                            segmentsRadial: 10; radiusTubular: .07; segmentsTubular: 32">
        </a-mixin>

        <!-- Layout mixins. -->
        <a-mixin id="column"
                  geometry="primitive: box; depth: .75; height: 1.2; width: .75"
                  material="color: #FFF" position="0 .6 0"></a-mixin>
        <a-mixin id="column-bottom" geometry="primitive: box; depth: 1;
                                              height: .1; width: 1;"
                 material="color: #FFF" position="0 .1 0">
        </a-mixin>
        <a-mixin id="column-light" light="type: point; intensity: 0.5;
                                          distance: 5;"
                  position="0 1.5 0">
        </a-mixin>
        <a-mixin id="object-on-column" position="0 1.2 0"></a-mixin>

        <!-- Animation mixins. -->
        <a-mixin id="yoyo" animation__yoyo="dir: alternate; loop: true"></a-mixin>
        <a-mixin id="spin" animation__spin="property: object3D.rotation.y; to: 360; loop: true; easing: linear; dur: 10000"></a-mixin>
        <a-mixin id="spinX" mixin="spin" animation__spin="property: object3D.rotation.x"></a-mixin>

        <a-mixin id="color" material="color: #FFFFC3"></a-mixin>
        <a-mixin id="doubleside" material="side: double"></a-mixin>

        <img id="carpet" src="carpet.jpg">
        <img id="floor" src="marble.jpg">
      </a-assets>

      <a-camera position="0 1.6 4"></a-camera>

      <!-- Lights. -->
      <a-entity light="type: ambient; color: #444"></a-entity>
      <a-entity light="type: directional; color: #EEE" position="0 1 1"></a-entity>

      <!-- Floor. -->
      <a-entity geometry="primitive: cylinder; height: .2; radius: 12;"
                material="color: #BABABA; src: #floor;
                          metalness: .2; repeat: 50 20; roughness: .1"
                position="0 0 0"></a-entity>

      <!-- Carpet. -->
      <a-entity geometry="primitive: box; depth: 20; height: 0.025; width: 2"
                material="color: #440000; metalness: 0; src: #carpet;
                          repeat: 3 40; roughness: 1"
                position="0 .2 0">
      </a-entity>

      <!-- Boxes. -->
      <a-entity position="-2.5 0 1">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color box spin" animation__spin="to: 360 360 0"></a-entity>
          <a-entity mixin="object-on-column color box spin" position=".18 1.2 .1" animation__spin="to: 360 360 0"></a-entity>
          <a-entity mixin="object-on-column color box spin" position="-.18 1.2 -.2" animation__spin="to: 360 360 0"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Circles. -->
      <a-entity position="-2.5 0 -2">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color doubleside circle spin"></a-entity>
          <a-entity mixin="object-on-column color doubleside circle spin"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Cylinders. -->
      <a-entity position="-2.5 0 -5">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color cylinder spinX"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Rings. -->
      <a-entity position="2.5 0 1">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color doubleside ring spin" animation__spin="dur: 6000"></a-entity>
          <a-entity mixin="object-on-column color doubleside ring spinX"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Spheres. -->
      <a-entity position="2.5 0 -2">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color sphere yoyo"
                    animation__yoyo="property: position; from: -0.2 1 0; to: -0.2 1.8 0"
                    position="-.2 1.2 0"></a-entity>
          <a-entity mixin="object-on-column color sphere yoyo"
                    animation__yoyo="property: position; from: 0 1.8 0; to: 0 1 0"></a-entity>
          <a-entity mixin="object-on-column color sphere yoyo" position=".2 1 0"
                    animation__yoyo="property: position; to: 0.2 1.8 0"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Torus. -->
      <a-entity position="2.5 0 -5">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color torus spin"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>

      <!-- Torus Knot. -->
      <a-entity position="2.5 0 -8">
        <a-entity mixin="column">
          <a-entity mixin="column-light"></a-entity>
          <a-entity mixin="object-on-column color torus-knot spin"></a-entity>
        </a-entity>
        <a-entity mixin="column-bottom"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
